<template>
	<view class="main-content-area">
		<u-navbar :titleSize="34" title="风险查询" back-icon-color="#000" :border-bottom="false" :background="{
			background:'url(https://resource.lanbaozixun.com/uploads/images/20250830001020984d05457.png) no-repeat',
			backgroundSize:'100% 560px'
			}" title-color="#000">
		</u-navbar>
		<view class="u-m-b-20">
			<u-tabs :list="[{
					name: '查询报告',
					url: '/yixu/pages/network_square/association_list',
				},{
					name: '邀请好友',
					url: '/yixu/pages/network_square/peer_collaboration',
				}]" active-color="#000" bg-color="transparent" :is-scroll="false" :current="current" :bar-width="80" :bar-style="{
					background:'#165DFF'
				}" @change="tabChange"></u-tabs>
		</view>
		<view class="u-border-radius-10 u-m-l-40 u-m-r-40 u-m-b-20 u-p-40 qr-code-area qr-code-bg">
			<view class="title bold">风险检测二维码</view>
			<tki-qrcode class="qr-code u-m-t-20" :val="qrCodeUrl" :loadMake="true"></tki-qrcode>
			<view v-if="current == 1 && shareId == 0" class="qr-code-cover">
				<view class="hint">待生成</view>
			</view>
			<view @click="posterShowStatus = true" class="poster-button" v-if="current == 1 && shareId != 0">
				<view>专码</view>
				<view>海报</view>
			</view>
			<view v-if="current == 0" class="u-p-t-20 u-p-l-20 c-999999 xs u-text-center">
				温馨提示：当前二维码无返佣
			</view>
		</view>
		<view v-if="current == 0" class="bg-white u-border-radius-20 u-m-l-40 u-m-r-40 u-m-b-20 u-p-20 qr-code-area u-m-t-40">
			<view class="row u-row-between u-p-t-20 u-p-b-20 u-p-l-20">
				<view class="bold">授权信息</view>
				<view class="u-flex query-lists-btn" @click="menuJump({
					link_type:1,
					link:'/yixu/pages/risk/lists'
				})">
					<u-icon name="order" color="#ffffff" size="28"></u-icon>
					<view class="white nr u-p-l-10">风险报告列表</view>
				</view>
			</view>

			<u-form ref="uForm" class="u-p-l-20 u-p-r-20" :model="formData" :error-type="['toast']" :rules="rules">
				<u-form-item prop="name" labelWidth="170" label="姓名"
					:leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161417bca3a8105.png'"
					:leftIconStyle="{
					width:'38rpx',
					height:'38rpx',
					position:'relative',
					transform:'translateY(25%)'
				}" :border-bottom="false">
					<u-input v-model="formData.name" placeholder="请输入姓名" />
				</u-form-item>

				<u-form-item prop="phone" labelWidth="170" label="手机号"
					:leftIcon="'https://resource.lanbaozixun.com/uploads/images/202407231614175e2115595.png'"
					:leftIconStyle="{
					width:'38rpx',
					height:'38rpx',
					position:'relative',
					transform:'translateY(25%)'
				}" :border-bottom="false">
					<u-input v-model="formData.phone" placeholder="请输入手机号" />
				</u-form-item>

				<u-form-item prop="code" labelWidth="170" label="验证码"
					:leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161417a2e6c4450.png'"
					:leftIconStyle="{
					width:'38rpx',
					height:'38rpx',
					position:'relative',
					transform:'translateY(25%)'
				}" :border-bottom="false">
					<u-input v-model="formData.code" placeholder="请输入验证码" />
					<view class="sms-btn sm row-center br60" style="color: #66a6ff;border-color: #66a6ff;"
						@click="$sendSms">
						<view v-show="canSendSms">获取验证码</view>
						<u-count-down ref="countDown" :show-days="false" :timestamp="time" :showColon="false"
							separator="zh" color="#66a6ff" separator-color="#66a6ff" :show-hours="false"
							:show-minutes="false" :autoplay="false" v-show="!canSendSms" @end="countDownFinish()" />
					</view>
				</u-form-item>
				<u-form-item prop="id_code" labelWidth="170" label="身份证"
					:leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161450537302785.png'"
					:leftIconStyle="{
					width:'38rpx',
					height:'38rpx',
					position:'relative',
					transform:'translateY(25%)'
				}" :border-bottom="false">
					<u-input v-model="formData.id_code" placeholder="请输入身份证" />
				</u-form-item>
				
				<u-button type="primary" :custom-style="{
					width:'calc(100% - 40rpx)',
					fontSize:'14px',
					margin: '40rpx 20rpx 0',
					borderRadius:'10rpx',
					background: '#165DFF'
				}" @click="applyProduct">支付{{defaultMoney || 0}}元查询报告</u-button>
			</u-form>
		</view>
		<view v-else class="bg-white u-border-radius-20 u-m-l-40 u-m-r-40 u-m-b-20 u-p-20 qr-code-area u-m-t-40">
			<view class="row u-row-between u-p-b-20 u-p-l-20">
				<view class="bold">付费查询</view>
			</view>

			<u-form ref="uForm" class="u-p-l-20 u-p-r-20" :model="formData" :error-type="['toast']" :rules="rules">
				<view class="input row-center">
					<view style="font-size: 23px;align-self: flex-end;margin-bottom: 5px">¥</view>
					<input v-model="money" placeholder="0.00"></input>
				</view>
				<view class="flex u-m-t-20">
					<u-tag v-for="(item,index) in moneyConfig" :key="index" @click="money = item.money;moneyConfigId = item.id"
						class="u-m-r-20" :text="item.money" bg-color="white" border-color="#165DFF" color="#165DFF" />
				</view>
			</u-form>

			<u-button type="primary" :custom-style="{
				width:'calc(100% - 40rpx)',
				fontSize:'14px',
				margin: '40rpx 20rpx 0',
				borderRadius:'10rpx',
				background: '#165DFF'
			}" @click="applyProductTow">生成专属二维码</u-button>

			<view class="u-p-t-20 u-p-l-20 c-999999 xs">
				温馨提示：当前返佣比例最高 60%
			</view>
		</view>
		<u-popup width="100%" height="100%" v-model="posterShowStatus" closeable close-icon-color="#ffffff" :custom-style="{background:'transparent'}" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.5)'}">
			<invite-poster class="poster" v-if="posterShowStatus" :config="{
				link: qrCodeUrl,
				qrCode: qrCodeUrl,
				poster: 'https://resource.lanbaozixun.com/uploads/images/202509041333269e9bf3463.png',
				bottom: 35,
				right: 48,
				width: 180,
				height: 180,
			}" />
			
			<view class="u-p-t-20 u-p-l-20 white xs u-text-center">
				温馨提示：长按保存可海报
			</view>
		</u-popup>
		<u-modal v-model="posterCreateModalStatus" title="温馨提示" content="是否生成专码海报" @confirm="posterShowStatus = true" show-cancel-button></u-modal>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
	</view>
</template>

<script>
	import {
		wxpay
	} from '@/utils/pay'
	import {
		sendSms
	} from '@/api/app';
	import {
		SMSType
	} from "@/utils/type"
	import {
		menuJump,
		isWeixinClient
	} from '@/utils/tools.js'
	import {
		pay,
		oauthUrl,
		createShareId,
		queryConfigDatas
	} from '../../api/enterprise_report'
	import {
		mapGetters
	} from 'vuex'
	import TkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
	export default {
		data() {
			return {
				time: 60,
				openId: '',
				current: 0,
				isWeixin: false,
				canSendSms: true,
				loadingShowStatus: true,
				qrCodeUrl: '',
				formData: {
					name: '',
					phone: '',
					id_code: '',
					code: ''
				},
				money:0,
				shareId:0,
				posterShowStatus:false,
				posterCreateModalStatus:false,
				moneyConfigId:0,
				defaultMoney:0,
				moneyConfig: [],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					id_code: [{
							required: true,
							message: '请输入身份证号码',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.idCard(value);
							},
							message: '身份证号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			};
		},
		async onLoad(e) {
			this.isWeixin = isWeixinClient()

			this.openId = e.openId

			if (this.isWeixin && this.$u.test.isEmpty(e.openId)) {
				var {
					data
				} = await oauthUrl({
					url: window.location.href
				})
				window.location.href = data
			} else if (this.isWeixin && !this.$u.test.isEmpty(e.openId)) {
				this.openId = e.openId
				this.loadingShowStatus = false;
			} else if (!this.isWeixin) {
				this.loadingShowStatus = false;
			}
			let url = new URL(location.href);
			this.qrCodeUrl = url.origin + `/mobile/yixu/pages/risk/share?invite_code=${this.inviteCode}`

			let res = await queryConfigDatas({type:1})

			if (res.code == 1) this.defaultMoney = res.data
			
			uni.$once('h5ShareSetFinished',function(w,o){
				o.shareTitle = '百行征信代理';
				o.shareDesc = '百行征信代理';
				w.share(o)
			})
		},
		methods: {
			menuJump(e) {
				menuJump(e)
			},
			countDownFinish() {
				this.canSendSms = true;
			},
			// 发送验证码
			$sendSms() {
				if (this.canSendSms == false) {
					return;
				}
				if (!this.formData.phone) {
					this.$toast({
						title: '请填写手机号信息～'
					})
					return;
				}

				sendSms({
					mobile: this.formData.phone,
					key: SMSType.YZ
				}).then(res => {
					if (res.code == 1) {
						this.canSendSms = false;
						this.$refs.countDown.start();
						this.$toast({
							title: res.msg
						});
					}
				})
			},
			// 支付后处理
			handPayResult(result) {
				switch (result) {
					case 'success':
						uni.navigateTo({
							url: '/yixu/pages/risk/lists'
						})
						break;
					case 'fail':
					default:
						this.$u.toast('支付失败');
				}
				// 页面出栈
			},
			applyProduct() {
				const _this = this;

				if (!_this.isWeixin) return _this.$u.toast('微信外无法查询');
				_this.$refs.uForm.setRules(_this.rules);
				let {
					name,
					image,
					phone,
					id_code,
					code,
					money
				} = _this.formData;

				_this.$refs.uForm.validate(valid => {
					if (valid) {
						pay({
							id_card_name: name,
							code: code,
							mobile: phone,
							id_card: id_code,
							openid: _this.openId,
							config_id: _this.moneyConfigId,
						}).then(res => {
							if (res.code == 1) {
								WeixinJSBridge.invoke(
									'getBrandWCPayRequest', {
										"appId": res.data.appId,
										"paySign": res.data.paySign,
										"package": res.data.package,
										"nonceStr": res.data.nonceStr,
										"signType": res.data.signType,
										"timeStamp": res.data.timeStamp
									},
									function(res) {
										if (res.err_msg == "get_brand_wcpay_request:ok") {
											_this.handPayResult('success')
										} else {
											_this.handPayResult('fail')
										}
									}
								);
							} else {
								_this.$u.toast(res.msg);
							}
						})
					}
				});
			},
			async applyProductTow(){
				const _this = this;
				
				uni.showLoading({
					title:'数据上传中'
				})
				
				let uploadDatas = {}
				
				this.moneyConfig.map(function(e){
					if(e.id == _this.moneyConfigId){
						if(e.money == _this.money){
							uploadDatas.config_id = _this.moneyConfigId
						}else{
							uploadDatas.money = _this.money
						}
					}
				})
				
				if(this.$u.test.empty(uploadDatas.config_id)){
					uploadDatas.money = _this.money
				}
				
				
				let res = await createShareId(uploadDatas)
				
				uni.hideLoading()
				
				if (res.code == 1) {
					let url = new URL(location.href);
					this.shareId = res.data
					this.qrCodeUrl = url.origin + `/mobile/yixu/pages/risk/share?share_id=${res.data}`
					this.posterCreateModalStatus = true
				}
			},
			async tabChange(e){
				this.current = e
				if(this.$u.test.empty(this.moneyConfig) && e == '1') {
					this.loadingShowStatus = true
					let res = await queryConfigDatas()
					this.loadingShowStatus = false
					if (res.code == 1) {
						this.moneyConfig = res.data
						this.money = res.data[0].money
						this.moneyConfigId = res.data[0].id
					}
				}
			}
		},
		computed: {
			...mapGetters(['inviteCode', 'userInfo']),
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.main-content-area {
		min-height: 100vh;
		background: url(https://resource.lanbaozixun.com/uploads/images/20250830001020984d05457.png) no-repeat;
		background-size: 100% 560px;
	}

	.qr-code-bg {
		background: linear-gradient(90deg, rgba(235, 243, 254, 1) 0%, rgba(252, 235, 236, 1) 100%);
	}

	.qr-code-area {
		position: relative;

		.poster-button {
			right: 0;
			color: white;
			top: calc(40%);
			font-size: 12px;
			padding: 5px 10px;
			position: absolute;
			display: inline-block;
			border-radius: 5px 0 0 5px;
			background: linear-gradient(90deg, #6BB2FF 0%, #2C60DE 100%);
		}
	}

	.query-lists-btn {
		right: 0;
		padding: 5px 10px;
		position: absolute;
		display: inline-flex;
		border-radius: 5px 0 0 5px;
		background: linear-gradient(90deg, #6BB2FF 0%, #2C60DE 100%);
	}

	.title {
		color: #333333;
		font-size: 16px;
		text-align: center;
		padding-bottom: 10px;
	}

	.qr-code {
		text-align: center;
	}

	.input {
		border-bottom: $-solid-border;

		input {
			width: 100%;
			height: 94rpx;
			text-align: left;
			font-size: 66rpx;
			margin-left: 30rpx;
		}
	}

	.c-999999 {
		color: #999999;
	}
	
	.qr-code-cover{
		position: absolute;
		width: 115px;
		height: 115px;
		background: rgba(255, 255, 255, .8);
		left: calc(50% - 57.5px);
		bottom: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.hint{
			display: inline-block;
			background: #2C60DE;
			color: white;
			padding: 5px 15px;
			border-radius: 100px;
			font-size: 12px;
		}
	}
	
	.poster{
		width: 750rpx;
		display: block;
		margin: 10vh auto 10px ;
	}
</style>